<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>总考勤表</title>
    <!-- Bootstrap 5 CDN -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        body { background: #f8f9fa; font-size: 1.08rem; }
        .table thead th { vertical-align: middle; }
        .navbar { margin-bottom: 20px; }
        .select-attendance { min-width: 80px; }
        /* 状态颜色样式 */
        .status-canyu, .select-attendance.status-canyu, .select-attendance.status-canyu option:checked {
            background: #d4edda !important; color: #155724 !important;
        }
        .status-qingjia, .select-attendance.status-qingjia, .select-attendance.status-qingjia option:checked {
            background: #d1ecf1 !important; color: #0c5460 !important;
        }
        .status-tibu, .select-attendance.status-tibu, .select-attendance.status-tibu option:checked {
            background: #fff3cd !important; color: #856404 !important;
        }
        .status-quexin, .select-attendance.status-quexin, .select-attendance.status-quexin option:checked {
            background: #f8d7da !important; color: #721c24 !important;
        }
        .status-weirubang {
            background: #e9ecef !important;
            color: #495057 !important;
        }
        @media (max-width: 600px) {
            body { font-size: 0.98rem; }
            .container, .table-responsive { padding: 0 2px; }
            .navbar-brand { font-size: 1.1rem; }
            .form-control, .btn, .form-text, th, td { font-size: 0.98rem; }
            .table { font-size: 0.95rem; }
            .table thead th, .table tbody td { padding: 0.3rem 0.2rem; }
        }
    </style>
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light mb-4">
        <div class="container-fluid">
            <a class="navbar-brand" href="/">逐光帮会管理系统</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                    <li class="nav-item"><a class="nav-link active" href="/attendance_table">总考勤表</a></li>
                    {% if logged_in %}
                    <li class="nav-item"><a class="nav-link" href="/">考勤上传</a></li>
                    <li class="nav-item"><a class="nav-link" href="/jielong_admin">接龙任务管理</a></li>
                    <li class="nav-item"><a class="nav-link" href="/jielong/history">接龙历史</a></li>
                    {% endif %}
                </ul>
                <div class="d-flex">
                    {% if logged_in %}
                    <a class="btn btn-outline-secondary me-2" href="/logout">退出登录</a>
                    {% else %}
                    <a class="btn btn-outline-primary" href="/login">管理登录</a>
                    {% endif %}
                </div>
            </div>
        </div>
    </nav>
    <div class="container-fluid" style="overflow-x:auto; min-width:1200px;"> <!-- 支持全局横向滚动 -->
        <div class="row mb-3">
            <div class="col">
                <h2>总考勤表</h2>
                <a class="btn btn-link" href="/">返回上传</a>
                {% if logged_in %}
                <a class="btn btn-success ms-2" href="/create_attendance">手动创建考勤记录</a>
                {% endif %}
                <!-- 筛选表单 -->
                <form method="get" action="/attendance_table" class="row row-cols-auto g-2 align-items-center mb-2">
                    <div class="col">
                        <label for="date" class="form-label mb-0">日期</label>
                        <select name="date" id="date" class="form-select form-select-sm">
                            <option value="">全部</option>
                            {% for date, type in date_types %}
                            <option value="{{ date }}" {% if selected_date==date %}selected{% endif %}>{{ date }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="col">
                        <label for="type" class="form-label mb-0">类型</label>
                        <select name="type" id="type" class="form-select form-select-sm">
                            <option value="">全部</option>
                            {% for date, type in date_types %}
                            <option value="{{ type }}" {% if selected_type==type %}selected{% endif %}>{{ type }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="col">
                        <label for="start_date" class="form-label mb-0">起始日期</label>
                        <input type="date" name="start_date" id="start_date" class="form-control form-control-sm" value="{{ start_date or '' }}">
                    </div>
                    <div class="col">
                        <label for="end_date" class="form-label mb-0">结束日期</label>
                        <input type="date" name="end_date" id="end_date" class="form-control form-control-sm" value="{{ end_date or '' }}">
                    </div>
                    <div class="col align-self-end">
                        <button type="submit" class="btn btn-primary btn-sm">筛选</button>
                        <a href="/attendance_table" class="btn btn-secondary btn-sm">重置</a>
                    </div>
                </form>
                {% if logged_in and date_types %}
                <form method="post" action="/delete_attendance_column" class="d-inline-block ms-3" onsubmit="return confirm('确定要删除该日期和类型的所有考勤记录吗？');">
                    <div class="input-group input-group-sm" style="max-width:400px;display:inline-flex;">
                        <select name="date" class="form-select form-select-sm" required>
                            {% for date, type in date_types %}
                            <option value="{{ date }}">日期：{{ date }}</option>
                            {% endfor %}
                        </select>
                        <select name="type" class="form-select form-select-sm" required>
                            {% for date, type in date_types %}
                            <option value="{{ type }}">类型：{{ type }}</option>
                            {% endfor %}
                        </select>
                        <button type="submit" class="btn btn-danger btn-sm">删除该场考勤</button>
                    </div>
                </form>
                <!-- 新增：删除所有帮众名单按钮 -->
                <form method="post" action="/delete_all_bangzhong" class="d-inline-block ms-3" onsubmit="return confirm('确定要删除所有帮众名单吗？此操作不可恢复！');">
                    <button type="submit" class="btn btn-danger btn-sm">删除所有帮众名单</button>
                </form>
                <!-- 导出按钮 -->
                <button class="btn btn-success ms-2" id="export-btn" type="button">导出当前筛选结果</button>
                {% endif %}
            </div>
        </div>
        <div class="row">
            <div class="col">
                <div class="table-responsive" style="width:100%;"> <!-- 让表格自适应父容器宽度 -->
                    <table class="table table-bordered table-hover table-sm bg-white" style="min-width:1200px; width:100%;">
                        <thead class="table-light">
                            <tr>
                                <th style="min-width:60px;white-space:nowrap;">ID</th>
                                <th style="min-width:120px;white-space:nowrap;">玩家名称</th>
                                {% for date, type in date_types %}
                                    {% if type != '帮众名单' %}
                                        <th>{{ date }}<br><span class="text-secondary">{{ type }}</span></th>
                                    {% endif %}
                                {% endfor %}
                            </tr>
                        </thead>
                        <tbody>
                        {% for player_name, job in players %}
                            {% set player_info = table[player_name] %}
                            {% set job_color = {
                                '素问': 'rgb(227, 133, 158)',
                                '九灵': 'rgb(153, 86, 253)',
                                '潮光': 'rgb(121, 177, 233)',
                                '沧澜': 'rgb(91, 92, 140)',
                                '碎梦': 'rgb(79, 149, 161)',
                                '龙吟': 'rgb(59, 202, 158)',
                                '神相': 'rgb(75, 106, 249)',
                                '玄机': 'rgb(157, 150, 109)',
                                '铁衣': 'rgb(194, 129, 63)',
                                '血河': 'rgb(217, 87, 87)'
                            } %}
                            <tr>
                                <td>{{ loop.index }}</td>
                                <td style="background-color: {{ job_color.get(player_info.job, '#fff') }};">{{ player_name }}</td>
                                {% for date, type in date_types %}
                                    {% if type != '帮众名单' %}
                                        {% set val = player_info.attendance[(date, type)] %}
                                        {% set status_class = '' %}
                                        {% if val == '参与' %}
                                            {% set status_class = 'status-canyu' %}
                                        {% elif val == '请假' %}
                                            {% set status_class = 'status-qingjia' %}
                                        {% elif val == '替补' %}
                                            {% set status_class = 'status-tibu' %}
                                        {% elif val == '缺勤' %}
                                            {% set status_class = 'status-quexin' %}
                                        {% elif val == '未入帮' %}
                                            {% set status_class = 'status-weirubang' %}
                                        {% endif %}
                                        <td{% if status_class %} class="{{ status_class }}"{% endif %}>
                                            {% if logged_in and val != '未入帮' %}
                                            <select class="form-select form-select-sm select-attendance {{ status_class }}" onchange="updateAttendance('{{ player_name }}', '{{ player_info.job }}', '{{ date }}', '{{ type }}', this.value)">
                                                <option value="参与" {% if val=='参与' %}selected{% endif %}>参与</option>
                                                <option value="请假" {% if val=='请假' %}selected{% endif %}>请假</option>
                                                <option value="替补" {% if val=='替补' %}selected{% endif %}>替补</option>
                                                <option value="缺勤" {% if val=='缺勤' %}selected{% endif %}>缺勤</option>
                                            </select>
                                            {% else %}
                                            <span{% if status_class %} class="{{ status_class }}"{% endif %}>{{ val }}</span>
                                            {% endif %}
                                        </td>
                                    {% endif %}
                                {% endfor %}
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    {% if logged_in %}
    <script>
    function updateAttendance(player, job, date, type, status) {
        fetch('/update_attendance', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ player_name: player, date: date, type: type, status: status })
        });
        // 动态更新颜色
        var select = event.target;
        var td = select.closest('td');
        // 移除所有状态class
        select.classList.remove('status-canyu','status-qingjia','status-tibu','status-quexin');
        td.classList.remove('status-canyu','status-qingjia','status-tibu','status-quexin');
        // 添加新class
        if(status==='参与'){
            select.classList.add('status-canyu'); td.classList.add('status-canyu');
        }else if(status==='请假'){
            select.classList.add('status-qingjia'); td.classList.add('status-qingjia');
        }else if(status==='替补'){
            select.classList.add('status-tibu'); td.classList.add('status-tibu');
        }else if(status==='缺勤'){
            select.classList.add('status-quexin'); td.classList.add('status-quexin');
        }
    }
    // 导出按钮逻辑
    document.getElementById('export-btn').onclick = function() {
        const date = document.getElementById('date')?.value || '';
        const type = document.getElementById('type')?.value || '';
        const start_date = document.getElementById('start_date')?.value || '';
        const end_date = document.getElementById('end_date')?.value || '';
        const params = new URLSearchParams({date, type, start_date, end_date});
        window.location.href = `/export_attendance?${params.toString()}`;
    };
    </script>
    {% endif %}
</body>
</html>